<template>
	<el-dialog
    class="wechat-list-dialog"
    title="管理公众号"
    :visible.sync="isShow"
    @close="closeWechatDialog()">
    <div class="main">
      <div class="header">
        <div class="header-left">
          <el-tooltip
            content='扫码授权方式是基于微信开放平台提供的一键扫码自动授权的方式。'
            placement='bottom-start'
            effect='light'>
              <NewElButton
                class="auth-btn"
                :showShadow="true"
                @handleClick="addNewWechat()">
                <span class='btn-icon scan-code'></span>
                <span class="btn-text">扫码授权</span>
              </NewElButton>
            </el-tooltip>
            <el-tooltip
              content='手动添加授权方式是通过用户先申请公众号后，按照平台需要信息将微信公众号的对应信息手动填写到平台登记的方式。'
              placement='bottom-start'
              effect='light'>
              <NewElButton
                class="auth-btn ml30"
                :showShadow="true"
                @handleClick="addWechats()">
                <span class='btn-icon manual'></span>
                <span class="btn-text">手动授权</span>
              </NewElButton>
            </el-tooltip>
        </div>
      </div>
      <div class="cont">
        <ul class="wechat-list">
          <li
            class="wechat-item"
            :class="{active: info.appId === appId}"
            v-for="(info, i) in wechatList"
            :key="`wechat${i}`">
            <div class="title">
              <p class="name">{{info.wechatName}}</p>
              <p
                @click="handleDialogFormVisibleShow(info)"
                class="icon-edit"></p>
            </div>
            <div class="info">
              <div class="info-left">
                <p class="text">编号：{{info.id}}</p>
                <p class="text">微信：{{info.wechatUid || ''}}</p>
                <p class="text">类型：{{info.wechatType == '1'? '订阅号' : '服务号'}}</p>
                <p class="text">粉丝：{{info.fansCount}}</p>
                <p class="text time">{{info.authorizationTime}}</p>
              </div>
              <div class="info-right">
                <div v-if="!info.isAuth" class="status">未认证</div>
                <div v-else class="status active">已认证</div>
                <div class="qrcode">
                  <img :src="info.qrcodeImg" alt="">
                </div>
              </div>
            </div>
            <div class="bottom">
              <p @click="handleChage(info)" class="btn">切换公众号</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 添加公众号 -->
    <el-dialog
      append-to-body
      width="35%"
      :title="mechatManage"
      :visible.sync="addDialogFormVisible"
      @close="resetAddSubscription()">
      <el-form
        :model="addSubscription"
        :rules="rulesAdd"
        ref="addSubscriptionRef"
        label-width="120px"
        label-position="left"
        class="demo-ruleForm">
        <div style="display: flex;justify-content: center;margin-bottom: 20px;">
          <div v-if="addSubscription.qrcodeImg" class="wechat-icon" :style="{backgroundImage: 'url(' + getWxImg(addSubscription.qrcodeImg) + ')'}"></div>
          <div v-else class="wechat-icon"></div>
        </div>
        <el-form-item
          label="公众号原始ID"
          prop="wechatUid">
          <el-input
            placeholder="请输入公众号原始ID"
            v-model.trim="addSubscription.wechatUid">
          </el-input>
        </el-form-item>
        <el-form-item
          label="公众号名称"
          prop="wechatName">
          <div style="display: flex">
            <el-input
              placeholder="请输入公众号名称"
              maxlength="32"
              v-model.trim="addSubscription.wechatName">
            </el-input>
            <!-- <div v-if="addSubscription.code" @click="removeWechat(0)" style="margin-left: 20px;color: #FA376C;font-size: 14px;cursor: pointer;">移除</div> -->
          </div>
        </el-form-item>
        <el-form-item
          label="公众号类型"
          prop="wechatType">
          <el-radio-group
            :disabled="mechatManage === '公众号管理'" v-model="addSubscription.wechatType">
            <el-radio label="2">服务号</el-radio>
            <el-radio label="1">订阅号</el-radio>
            <!-- <el-radio label="work">企业微信</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="公众号AppId"
          prop="appId">
          <div style="display: flex">
            <el-input
              placeholder="请输入公众号AppId"
              v-model.trim="addSubscription.appId">
            </el-input>
            <!-- <div
              v-if="addSubscription.code"
              @click="removeWechat(0)"
              style="margin-left: 20px;color: #FA376C;font-size: 14px;cursor: pointer;">移除</div> -->
          </div>
        </el-form-item>
        <el-form-item
          label="公众号Secret"
          prop="appSecret">
          <el-input
            placeholder="请输入公众号Secret"
            v-model.trim="addSubscription.appSecret">
          </el-input>
        </el-form-item>
        <el-form-item
          label="公众号Token"
          prop="wechatToken">
          <el-input
            placeholder="请输入公众号Token"
            v-model.trim="addSubscription.wechatToken">
          </el-input>
        </el-form-item>
        <el-form-item
          label="公众号AESKey"
          prop="encodingAesKey">
          <el-input
            placeholder="请输入公众号AESKey"
            v-model.trim="addSubscription.encodingAesKey">
          </el-input>
        </el-form-item>
        <el-form-item
          label="公众号主体名称"
          prop="principalName">
          <el-input
            placeholder="请输入公众号认证主体名称"
            v-model.trim="addSubscription.principalName">
          </el-input>
        </el-form-item>
        <div
          v-show="addSubscription.wechatType == 1"
          class='settingBox-header'>
          <span class='iconfont'>&#xe69e;</span> 提示：若想在订阅号中提升功能权限可选择服务号“订阅号+服务号”来提升能力！
        </div>
        <el-form-item
          v-show="addSubscription.wechatType == 1"
          label="功能升级号"
          class='article-authority'>
          <el-select
            v-model="addSubscription.expandAppid"
            placeholder="请选择"
            class='actionPermit-select'>
            <el-option v-for='item in serviceList'
              :key='item.appId'
              :label='item.wechatName'
              :value='item.appId'>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="confirmAdd()">确定</el-button>
        <el-button size="small" @click="addDialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑公众号-手动授权的公众号 -->
    <el-dialog
      class="edit-wechat-dialog"
      append-to-body
      width="48%"
      :title="mechatManage"
      :visible.sync="dialogFormVisible2">
      <div v-if="dioTextTwo === '下一步'">
        <el-form
          :model="subscriptionElse"
          :rules="rulesElse2"
          ref="subscription"
          label-width="120px"
          label-position="left"
          class="demo-ruleForm">
          <div style="display: flex;justify-content: center;margin-bottom: 20px;">
            <div
              v-if="subscriptionElse.qrcodeImg" class="wechat-icon"
              :style="{backgroundImage: 'url(' + getWxImg(subscriptionElse.qrcodeImg)  + ')'}"></div>
            <div v-else class="wechat-icon"></div>
          </div>
          <div class="qrcode">
            <img :src="subscriptionElse.qrcodeImg" alt="">
          </div>
          <el-form-item
            label="公众号原始ID"
            prop="wechatUid">
            <el-input
              class="w240"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号原始ID"
              v-model.trim="subscriptionElse.wechatUid">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号名称"
            prop="wechatName">
            <div style="display: flex">
              <el-input
                class="w240"
                maxlength="32"
                :disabled="currentAuthorizationStatus === 1"
                placeholder="请输入微信公众号名称"
                v-model.trim="subscriptionElse.wechatName">
              </el-input>
              <!-- <div
                v-if="subscriptionElse.code"
                @click="removeWechat(0)"
                style="margin-left: 20px;color: #FA376C;font-size: 14px;cursor: pointer;">移除</div> -->
            </div>
          </el-form-item>
          <el-form-item
            label="公众号类型"
            prop="wechatType">
            <el-radio-group
              :disabled="mechatManage === '公众号管理'"
              v-model="subscriptionElse.wechatType">
              <el-radio label="2">服务号</el-radio>
              <el-radio label="1">订阅号</el-radio>
              <!-- <el-radio label="work">企业微信</el-radio> -->
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="公众号AppId"
            prop="appId">
            <el-input
              class="w400"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号AppId"
              v-model.trim="subscriptionElse.appId">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号Secret"
            prop="appSecret">
            <el-input
              class="w400"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号Secret"
              v-model.trim="subscriptionElse.appSecret">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号Token"
            prop="wechatToken">
            <el-input
              class="w400"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号Token"
              v-model.trim="subscriptionElse.wechatToken">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号AESKey"
            prop="encodingAesKey">
            <el-input
              class="w400"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号AESKey"
              v-model.trim="subscriptionElse.encodingAesKey">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号主体名称"
            prop="principalName">
            <el-input
              class="w400"
              :disabled="currentAuthorizationStatus === 1"
              placeholder="请输入公众号主体名称"
              v-model.trim="subscriptionElse.principalName">
            </el-input>
          </el-form-item>
          <div
            v-show="subscriptionElse.wechatType == 1"
            class='settingBox-header'>
            <span class='iconfont'>&#xe69e;</span> 提示：若想在订阅号中提升功能权限可选择服务号“订阅号+服务号”来提升能力！
          </div>
          <el-form-item
            v-show="subscriptionElse.wechatType == 1"
            label="功能升级号"
            class='article-authority'>
            <el-select
              v-model="subscriptionElse.expandAppid"
              placeholder="请选择"
              class='actionPermit-select'>
              <el-option v-for='item in serviceList'
                :key='item.appId'
                :label='item.wechatName'
                :value='item.appId'>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-else>
        <input id="copyTitle" class="hidden-input">
        <div>请按照以下步骤配置开发者信息(登录<a target="_blank" href="https://mp.weixin.qq.com">微信公众平台</a>)：</div>
        <div class="dio-wrapper">
          <div>1.设置IP白名单：</div>
          <div
            v-for="(item, index) of wechatDetail.ips"
            :key="item">
            <div class="wrapper-info">
              {{item}}
              <div v-if="index === 0" class="copy" @click="handleCopyTitle(wechatDetail.ips)">复制</div>
            </div>
          </div>
        </div>
        <div class="dio-wrapper">
          <div>2.填写服务器配置并开启：</div>
          <div style="margin:10px 0 0 12px">服务器地址(URL)</div>
          <div class="wrapper-info">{{wechatDetail.serverAddr}}
            <div v-if="wechatDetail.serverAddr" class="copy" @click="handleCopyTitle(wechatDetail.serverAddr)">复制</div>
          </div>
          <div style="margin-left: 12px">令牌（Token）</div>
          <div class="wrapper-info">{{subscriptionElse.wechatToken}}
            <div class="copy" @click="handleCopyTitle(subscriptionElse.wechatToken)">复制</div>
          </div>
          <div style="margin-left: 12px" v-show='subscriptionElse.encodingAesKey'>EncodingAESKey</div>
          <div class="wrapper-info" v-show='subscriptionElse.encodingAesKey'>{{subscriptionElse.encodingAesKey}}
            <div class="copy" @click="handleCopyTitle(subscriptionElse.encodingAesKey)">复制</div>
          </div>
          <!-- <div style="margin-left: 12px">消息加解密方式</div>
          <div class="wrapper-info">明文模式</div> -->
        </div>
        <!-- <div class="dio-wrapper">
          <div>3.配置安全域名：</div>
          <div class="wrapper-info" style="display: flex">
            <div>
              <el-upload
                class="upload-demo"
                ref="upload"
                style="display:inline-block;width:300px;flex: 1"
                :limit="limit = 1"
                action=""
                :on-exceed="handleOverUpLoad"
                accept=".txt"
                :http-request="uploadExl"
                :file-list="fileList">
                <span class="select-file">上传验证文件</span>
              </el-upload>
            </div>
          </div>
          <div style="margin-left: 12px">JS接口安全域名</div>
          <div class="wrapper-info">{{wechatDetail.domain}}
            <div v-if="wechatDetail.domain" class="copy" @click="handleCopyTitle(wechatDetail.domain)">复制</div>
          </div>
          <div style="margin-left: 12px">网页授权域名</div>
          <div class="wrapper-info">{{wechatDetail.domain}}
            <div v-if="wechatDetail.domain" class="copy" @click="handleCopyTitle(wechatDetail.domain)">复制</div>
          </div>
        </div> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          @click="handleFormElse()">{{dioTextTwo}}</el-button>
        <el-button
          size="small"
          @click="handleDialogFormVisible2()">{{dioTextOne}}</el-button>
        <TypeButton
          style="margin-left:40px;"
          v-show="currentAuthorizationStatus !== 1"
          type='delete'
          class='deleteBtn'
          size="small"
          @handleClick="deleteWechat(subscriptionElse.appId)"/>
        <el-button
          style="margin-left:40px;"
          size="small"
          type="info"
          v-show="currentAuthorizationStatus === 1"
          @click="removeWechat(subscriptionElse.id, subscriptionElse.appId)">解除授权</el-button>
      </div>
    </el-dialog>
    <!-- 编辑公众号-扫码授权的公众号 -->
    <el-dialog
      append-to-body
      width="35%"
      :title="mechatManage"
      :visible.sync="scanCodeVisible">
      <div v-if="dioTextTwo === '下一步'">
        <el-form
          :model="scanCodeForm"
          :rules="rulesElse1"
          label-width="120px"
          label-position="left"
          class="demo-ruleForm">
          <div style="display: flex;justify-content: center;margin-bottom: 20px;">
            <div
              v-if="scanCodeForm.avatar"
              class="wechat-icon"
              :style="{backgroundImage: 'url(' + getWxImg(scanCodeForm.avatar)  + ')'}"></div>
            <div v-else class="wechat-icon"></div>
          </div>
          <el-form-item
            label="公众号原始ID"
            prop="wechatUid">
            <el-input
              disabled
              placeholder="请输入公众号原始ID"
              v-model.trim="scanCodeForm.wechatUid">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号名称"
            prop="wechatName">
            <div style="display: flex">
              <el-input
                disabled
                placeholder="请输入公众号名称"
                maxlength="32"
                v-model.trim="scanCodeForm.wechatName">
              </el-input>
              <!-- <div
                v-if="scanCodeForm.code"
                @click="removeWechat(0)"
                style="margin-left: 20px;color: #FA376C;font-size: 14px;cursor: pointer;">移除</div> -->
            </div>
          </el-form-item>
          <el-form-item
            label="公众号类型"
            prop="wechatType">
            <el-radio-group
              disabled
              v-model="scanCodeForm.wechatType">
              <el-radio label="2">服务号</el-radio>
              <el-radio label="1">订阅号</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="公众号AppId"
            prop="appId">
            <el-input
              disabled
              placeholder="请输入公众号AppId"
              v-model.trim="scanCodeForm.appId">
            </el-input>
          </el-form-item>
          <el-form-item
            label="公众号主体名称"
            prop="principalName">
            <el-input
              disabled
              placeholder="请输入公众号主体名称"
              v-model.trim="scanCodeForm.principalName">
            </el-input>
          </el-form-item>
          <div
            v-show="scanCodeForm.wechatType == 1"
            class='settingBox-header'>
            <span class='iconfont'>&#xe69e;</span> 提示：若想在订阅号中提升功能权限可选择服务号“订阅号+服务号”来提升能力！
          </div>
          <el-form-item
            v-show="scanCodeForm.wechatType == 1"
            label="功能升级号"
            class='article-authority'>
            <el-select
              v-model="scanCodeForm.expandAppid"
              placeholder="请选择"
              class='actionPermit-select'>
              <el-option v-for='item in serviceList'
                :key='item.appId'
                :label='item.wechatName'
                :value='item.appId'>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveScanCode()" size="small" type="primary">保存</el-button>
        <el-button @click="scanCodeVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
import NewElButton from '@/components/elUI/NewElButton'
import TypeButton from '@/public/typeButton'
import {getTanentLimit} from '@/api'
export default {
  name: 'wechatDialog',
  components: {
    NewElButton,
    TypeButton
  },
  data () {
    return {
      isShow: true,
      appId: '',
      wechatList: [],
      publicTotal: 0, // 当前租户公众号数量
      limitInfo: {}, // 租户限制信息
      serviceList: [], // 服务号列表
      /* 手动授权相关 */
      addDialogFormVisible: false,
      mechatManage: '设置公众号',
      addSubscription: {
        wechatName: null,
        wechatType: null,
        appId: null,
        appSecret: null,
        encodingAesKey: null,
        wechatToken: null,
        principalName: null,
        wechatUid: null,
        expandAppid: null
      },
      rulesAdd: {
        wechatName: [{required: true, message: '必填', trigger: 'blur'}],
        wechatType: [{required: true, message: '必选', trigger: 'change'}],
        appId: [{ required: true, message: '必填', trigger: 'blur' }],
        appSecret: [{ required: true, message: '必填', trigger: 'blur' }],
        wechatToken: [{ required: true, message: '必填', trigger: 'blur' }],
        encodingAesKey: { max: 43, message: '长度不能超过43个字符', trigger: 'blur' },
        wechatUid: {required: true, message: '必填', trigger: 'blur'}
      },
      wechatDetail: {}, // 公众号详情
      /* 编辑公众号相关-手动授权的公众号 */
      dialogFormVisible2: false,
      currentAuthorizationStatus: null, // 未授权时表单可以修改，手动授权成功表单不可以修改
      dioTextOne: '取 消',
      dioTextTwo: '下一步',
      subscriptionElse: {
        module: 1,
        id: null,
        wechatName: null,
        authType: '1',
        appId: null,
        appSecret: null,
        applicationType: 1,
        wechatToken: null,
        encodingAesKey: null,
        wechatType: '1',
        principalName: null,
        wechatUid: null,
        expandAppid: null
      },
      rulesElse2: {
        wechatName: [{required: true, message: '必填', trigger: 'blur'}],
        wechatType: [{required: true, message: '必选', trigger: 'change'}],
        appId: [{ required: true, message: '必填', trigger: 'blur' }],
        appSecret: [{ required: true, message: '必填', trigger: 'blur' }],
        wechatToken: [{ required: true, message: '必填', trigger: 'blur' }],
        encodingAesKey: { max: 43, message: '长度不能超过43个字符', trigger: 'blur' },
        wechatUid: {required: true, message: '必填', trigger: 'blur'}
      },
      /* 编辑公众号-扫码授权的公众号 */
      // 当公众号的绑定方式是扫码时，点击设置只能查看
      scanCodeVisible: false,
      scanCodeForm: {
        avatar: '',
        wechatName: null,
        wechatType: '1',
        appId: null,
        principalName: null,
        wechatUid: null,
        expandAppid: null
      },
      rulesElse1: {
        wechatName: [{required: true, message: '必填', trigger: 'blur'}],
        wechatType: [{required: true, message: '必选', trigger: 'change'}],
        appId: [{ required: true, message: '必填', trigger: 'blur' }],
        wechatUid: {required: true, message: '必填', trigger: 'blur'}
      }
    }
  },
  methods: {
    // 授权新公众号
    addNewWechat () {
      if (this.limitInfo.mpCount <= this.publicTotal) {
        return this.showErrMsg(`当前公众号授权数量已达到极限(${this.limitInfo.mpCount}个)，可联系客户进行在线升级！`)
      }
      let url = `/wechat/server/response/goto_auth_url_show`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          window.open(res.data.data.redirectUrl)
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    /* 添加公众号---开始 */
    // 手动授权
    addWechats () {
      if (this.limitInfo.mpCount <= this.publicTotal) {
        return this.showErrMsg(`当前公众号授权数量已达到极限(${this.limitInfo.mpCount}个)，可联系客户进行在线升级！`)
      }
      this.mechatManage = '设置公众号'
      this.addDialogFormVisible = true
      this.fetchServiceList()
    },
    // 添加公众号确定按钮
    confirmAdd () {
      this.$refs.addSubscriptionRef.validate((valid) => {
        if (valid) {
          this.confirmAddWechat()
        } else {
          this.$message({
            message: '请填写必填项',
            type: 'warning'
          })
        }
      })
    },
    // 添加新公众号
    confirmAddWechat () {
      this.loading = true
      let url = `${this.SERVICE_WECHAT}/add`
      let param = {
        wechatName: this.addSubscription.wechatName,
        wechatType: this.addSubscription.wechatType,
        appId: this.addSubscription.appId,
        appSecret: this.addSubscription.appSecret,
        encodingAesKey: this.addSubscription.encodingAesKey,
        wechatToken: this.addSubscription.wechatToken,
        principalName: this.addSubscription.principalName,
        wechatUid: this.addSubscription.wechatUid,
        expandAppid: this.addSubscription.expandAppid
      }
      this.posts(url, param).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          this.showSucc('添加成功')
          this.getTableList()
          this.fetchWechatList()
          this.addDialogFormVisible = false
          this.resetAddSubscription()
        }
      }).catch(e => {
        this.loading = false
        this.addDialogFormVisible = false
        this.handleError(e)
      })
    },
    // 关闭手动授权重置表单
    resetAddSubscription () {
      this.addSubscription = {
        wechatName: null,
        wechatType: null,
        appId: null,
        appSecret: null,
        encodingAesKey: null,
        wechatToken: null
      }
      this.$refs.addSubscriptionRef.resetFields()
    },
    /* 添加公众号---结束 */
    /* 编辑公众号-手动授权---开始 */
    // 获取单个公众号信息
    handleDialogFormVisibleShow (data) {
      this.mechatManage = '公众号管理'
      switch (data.authType) {
        case 0:
        case 1:
          this.currentAuthorizationStatus = data.authorizationStatus
          this.dialogFormVisible2 = true
          this.dioTextOne = '取 消'
          this.dioTextTwo = '下一步'
          break
        case 2:
          this.scanCodeVisible = true
          break
      }
      this.fetchServiceList()
      this.currWechatId = data.id
      this.currAppId = data.appId
      let url = `${this.SERVICE_WECHAT}/${this.currAppId}`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          switch (data.authType) {
            case 0:
            case 1:
              this.subscriptionElse = data
              break
            case 2:
              this.scanCodeForm = data
              break
          }
        }
      })
    },
    // 保存修改公众号
    handleFormElse () {
      if (this.dioTextTwo === '下一步') {
        if (!this.subscriptionElse.appId || !this.subscriptionElse.appSecret || !this.subscriptionElse.wechatToken) {
          this.$message({
            message: '请输入完整信息',
            type: 'warning'
          })
          return
        }
        let url = `${this.SERVICE_WECHAT}/modify/${this.subscriptionElse.appId}`
        let param = {
          id: this.subscriptionElse.id || '',
          wechatName: this.subscriptionElse.wechatName || '',
          appId: this.subscriptionElse.appId || '',
          appSecret: this.subscriptionElse.appSecret || '',
          encodingAesKey: this.subscriptionElse.encodingAesKey || '',
          wechatToken: this.subscriptionElse.wechatToken || '',
          principalName: this.subscriptionElse.principalName || '',
          wechatUid: this.subscriptionElse.wechatUid || '',
          expandAppid: this.subscriptionElse.expandAppid || ''
        }
        this.posts(url, param).then(res => {
          if (res.data.code === 200) {
            // this.dialogFormVisible2 = false
            this.showSucc('修改成功')
            this.getWechatDetail()
            this.dioTextTwo = '确定'
            // this.getTableList()
          }
        }).catch(e => {
          this.handleError(e)
        })
        // }
      } else if (this.dioTextTwo === '确 定') {
        this.dialogFormVisible2 = false
        this.getTableList()
      }
    },
    // 获取公众号详情
    getWechatDetail () {
      let url = `${this.SERVICE_WECHAT}/authorization/${this.currAppId}?wechatId=${this.currWechatId}`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          this.wechatDetail = res.data.data
          this.dioTextOne = '上一步'
          this.dioTextTwo = '确 定'
          this.mechatManage = '配置开发信息'
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    // 取消修改公众号重置信息
    handleDialogFormVisible2 () {
      if (this.dioTextOne === '取 消') {
        this.dialogFormVisible2 = false
      } else if (this.dioTextOne === '上一步') {
        if (this.wechatDetail.wxId) {
          this.mechatManage = '添加公众号'
        } else {
          this.mechatManage = '公众号管理'
        }
        this.dioTextOne = '取 消'
        this.dioTextTwo = '下一步'
      }
    },
    /* 编辑公众号-手动授权---结束 */
    /* 编辑公众号-扫码授权---开始 */
    // 保存扫码授权
    saveScanCode () {
      if (!this.scanCodeForm.appId) {
        this.$message({
          message: '请输入完整信息',
          type: 'warning'
        })
        return
      }
      let url = `${this.SERVICE_WECHAT}/modify/${this.scanCodeForm.appId}`
      let param = {
        id: this.scanCodeForm.id || '',
        wechatName: this.scanCodeForm.wechatName || '',
        appId: this.scanCodeForm.appId || '',
        principalName: this.scanCodeForm.principalName || '',
        wechatUid: this.scanCodeForm.wechatUid || '',
        expandAppid: this.scanCodeForm.expandAppid || ''
      }
      this.posts(url, param).then(res => {
        if (res.data.code === 200) {
          this.showSucc('修改成功')
          this.scanCodeVisible = false
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    /* 编辑公众号-扫码授权---结束 */
    // 删除公众号
    deleteWechat (appId) {
      if (appId) {
        this.$confirm('确认删除当前的公众号?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = `${this.SERVICE_WECHAT}/del/${appId}`
          this.post(url).then(res => {
            if (res.data.code === 200) {
              this.dialogFormVisible2 = false
              this.dioTextOne = '取 消'
              this.dioTextTwo = '下一步'
              sessionStorage.removeItem('currWechatData')
              sessionStorage.removeItem('wechatId')
              sessionStorage.removeItem('wechatName')
              sessionStorage.removeItem('authorizationStatus')
              sessionStorage.removeItem('wechatImg')
              this.fetchWechatList()
              this.getTableList()
            }
          }).catch(e => {
            this.handleError(e)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    // 解除授权
    removeWechat (id, appId) {
      if (id) {
        this.subscriptionElse.id = id
        this.$confirm('确认是否需要取消授权?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDeleteCb(appId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消授权'
          })
        })
      }
    },
    // 确认取消授权
    handleDeleteCb (appId) {
      let url = `${this.SERVICE_WECHAT}/authorization/${appId}/cancel`
      this.get(url).then(res => {
        if (res.status === 200) {
          this.dialogFormVisible2 = false
          this.showSucc('解除授权成功')
          this.getTableList()
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    // 获取服务号列表
    fetchServiceList () {
      let url = `${this.SERVICE_WECHAT}/serviceList`
      this.get(url).then(res => {
        let data = res.data.data
        if (data) {
          this.serviceList = data
        } else {
          this.serviceList = []
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    // 获取所有公众号的列表
    fetchWechatList () {
      // let url = `${this.SERVICE_WECHAT}/select?isAuth=true`
      let url = `${this.SERVICE_WECHAT}/list`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          sessionStorage.setItem('wechatList', JSON.stringify(data))
          if (data && data.length > 0) {
            // 通知服务器当前的 wechatId
            if (data[0]) {
              if (!sessionStorage.getItem('currWechatData')) {
                this.appId = sessionStorage.setItem('appid', data[0].appId)
                let currWechatData = JSON.stringify(data[0])
                sessionStorage.setItem('currWechatData', currWechatData)
                sessionStorage.setItem('wechatId', data[0].id)
                sessionStorage.setItem('appid', data[0].appId)
                sessionStorage.setItem('wechatName', data[0].wechatName)
                sessionStorage.setItem('authorizationStatus', data[0].authorizationStatus)
                sessionStorage.setItem('wechatImg', data[0].qrcodeImg)
              } else {
                this.appId = sessionStorage.getItem('appid')
              }
            }
          } else {
            this.closeWechatDialog()
            sessionStorage.removeItem('currWechatData')
            sessionStorage.removeItem('wechatId')
            sessionStorage.removeItem('wechatName')
            sessionStorage.removeItem('authorizationStatus')
            sessionStorage.removeItem('wechatImg')
            this.linkTo({name: 'wechatGuide'})
          }
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    // 获取租户限制信息
    getTenantLimitInfo () {
      getTanentLimit({}).then(res => {
        if (res.data.code === 200) {
          // sessionStorage.setItem('limitInfo', JSON.stringify(res.data.data))
          let data = res.data.data
          if (data) {
            this.limitInfo = res.data.data
          } else {
            this.limitInfo = {}
          }
        }
      }).catch(err => this.handleError(err))
    },
    // 获取公众号列表
    getTableList () {
      this.loading = true
      let url = `${this.SERVICE_WECHAT}/list`
      this.get(url).then(res => {
        this.loading = false
        if (res.status === 203) {
        } else {
          let data = res.data.data
          if (data && data.length) {
            this.wechatList = data
            let wechatId = sessionStorage.getItem('wechatId')
            if (wechatId) {
              this.wechatList.map(item => {
                if (item.id === wechatId) {
                  sessionStorage.setItem('wechatName', item.wechatName)
                  sessionStorage.setItem('appid', item.appId)
                }
              })
            }
            this.publicTotal = data.length
          } else {
            this.wechatList = []
          }
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    // 复制链接
    handleCopyTitle (val) {
      let input = document.getElementById('copyTitle')
      input.value = val
      input.select()
      document.execCommand('Copy')
      this.$message({
        message: '复制成功',
        type: 'success'
      })
    },
    // 关闭弹框
    closeWechatDialog () {
      this.$emit('handleClose', false)
    },
    // 切换公众号
    handleChage (info) {
      let appId = sessionStorage.getItem('appid')
      if (info.appId === appId) {
        return
      }
      this.$emit('change', info)
    }
  },
  created () {
    this.getTenantLimitInfo()
    this.fetchWechatList()
    this.getTableList()
  }
}
</script>
<style lang="stylus" scoped>
// 公共样式
.ml30
  margin-left 30px
// 平台列表
.wechat-list-dialog
  >>> .el-dialog
    width 100%
    max-width 1114px
    margin-top 10vh!important
    .el-dialog__header
      padding 20px 30px
      border-bottom 1px solid #ECEDF2
    .el-dialog__body
      padding 0 0 30px 40px
    .main
      width 100%
      .header
        width 100%
        padded_box(border-box, 18px 0)
        display flex
        justify-content space-between
        align-items center
        .header-left
          display flex
          align-items center
        .auth-btn
          display flex
          align-items center
          .btn-icon
            width 16px
            height 16px
            background-repeat no-repeat
            background-position center
            background-size 100%
            margin-right 8px
            &.scan-code
              background-image url('~assets/img/ic_saoma@2x.png')
            &.manual
              background-image url('~assets/img/ic_shoudongshili@2x.png')
          .btn-text
            font-size: 14px;
            color: #FFFFFF
    .cont
      width 100%
      margin-top 6px
      .wechat-list
        width 100%
        scroll()
        scroll-bar()
        height 614px
        display flex
        flex-wrap wrap
        .wechat-item
          width 310px
          height 282px
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(28, 41, 90, 0.04);
          border-radius: 10px;
          border: 1px solid #EAEDF7
          box-sizing border-box
          margin 0 45px 25px 0
          &.active
            border 1px solid #3383ff
            .bottom
              .btn
                border 1px solid #d2d4d8
                color #fff
                background #d2d4d8
          .title
            height: 70px;
            background: #D9DDE1;
            border-radius: 10px 10px 0px 0px;
            padded_box(border-box, 23px 10px 23px 20px)
            display flex
            justify-content space-between
            align-items center
            .name
              width calc(100% - 30px)
              height 24px
              line-height 24px
              font-size: 16px;
              color: #22242F
              no-wrap()
            .icon-edit
              width 24px
              height 24px
              background url('~assets/img/ic_bianji@2x.png') no-repeat center/ 100%
              cursor: pointer
              margin-top -27px
              &:hover
                background-image url('~assets/img/ic_bianji_pass@2x.png')
          .info
            width 100%
            display flex
            justify-content space-between
            padded_box(border-box, 11px 10px 13px 20px)
            .info-left
              padded_box(border-box, 2px 0 0 )
              .text
                height: 16px;
                font-size: 12px;
                color: #5E5E66;
                line-height: 16px
                & + .text
                  margin-top 8px
                &.time
                  margin-top 11px
            .info-right
              display flex
              flex-direction column
              justify-content space-between
              align-items flex-end
              padded_box(border-box, 0 0 3px)
              .status
                width: 44px;
                height: 25px;
                line-height: 26px;
                text-align center
                background: #D2D4D8;
                border-radius: 4px;
                font-size: 12px;
                color: #FFFFFF;
                margin-right -3px
                &.active
                  background: #13C789;
              .qrcode
                width 37px
                height 37px
                background #ddd
                img
                  width 100%
          .bottom
            width 100%
            padded_box(border-box, 14px 45px 19px)
            .btn
              width 100%
              // width: 220px;
              height: 36px;
              line-height: 36px;
              text-align center
              border-radius: 8px;
              border: 1px solid #3383FF
              font-size: 16px;
              color: #4C84FF;
              box-sizing border-box
              cursor pointer
.edit-wechat-dialog
  >>> .el-dialog
    .w240
      width 240px
    .w400
      width 400px
      max-width 400px
      .el-input__inner
        max-width 400px
    .demo-ruleForm
      position relative
      .qrcode
        width 89px
        height 89px
        background #ddd
        position absolute
        top 22px
        right 40px
        img
          width 100%
    .dio-wrapper
      margin-top 20px
      .wrapper-info
        between()
        margin 10px 0 10px 12px
        color #15C78A
        .copy
          width 65px
          text-align right
          color #FC713D
          cursor pointer
</style>
